<template>
	<view class="reprot ff-padding-bottom-70">
		<view class="report-header ff-bg-blue">
			<view class="report-header-content ff-align-items-one ff-flex-between">
				<view class="report-header-content-success ff-color-fff ff-font-18 ff-line-height-1-3">
					{{ assessProjectDetails.assessName }}
				</view>
			</view>
		</view>
		<view class="report-content ff-border-radius-10 ff-bg-fff ff-margin-12 ff-font-14">
			<view class="report-content-info-header ff-padding-left-15 ff-padding-bottom-0 ff-padding-right-15">
				<image src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/report-edit.png"
					mode=""></image>
			</view>
			<view class="report-content-info-box ff-padding-10 ff-padding-bottom-0 ff-line-height-1-3 ff-color-222">
				<view
					class="report-content-info-box-title ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					项目概况</view>
				<view class="report-content-info-box-content">
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left">社会单位</view>
						<view class=" report-content-info-box-content-right">{{ assessProjectDetails.companyName }}
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left">单位类型</view>
						<view class="report-content-info-box-content-right">{{ assessProjectDetails.companyTypeName }}
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left">项目类型</view>
						<view class="report-content-info-box-content-right">
							{{ assessProjectDetails.assessProjectTypeName }}
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left">建筑面积(m²)</view>
						<view class="report-content-info-box-content-right">{{ assessProjectDetails.assessProjectArea }}
						</view>
					</view>
					<view class="ff-flex ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left">评估地址</view>
						<view class="report-content-info-box-content-right">{{ assessProjectDetails.assessAddr }}</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left">法定代表人</view>
						<view class="report-content-info-box-content-right">{{ assessProjectDetails.companyLegalName }}
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left">消防安全管理人</view>
						<view class="report-content-info-box-content-right">
							{{ assessProjectDetails.fireManageName }}&nbsp;{{ assessProjectDetails.fireManagePhone }}
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left">消防安全职能部门</view>
						<view class="report-content-info-box-content-right">
							{{ assessProjectDetails.fireSafetyDepartment }}
						</view>
					</view>
				</view>
			</view>
			<view class="report-content-info-box ff-padding-10 ff-padding-bottom-0">
				<view
					class="report-content-info-box-title ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					主要消防设施</view>
				<view class="report-content-info-box-content">
					<view class="ff-flex-wrap">
						<view class="ff-margin-right-10 ff-margin-bottom-10"
							v-for="(item, index) of assessProjectDetails.facilities" :key="index">
							<u-tag :text="`${index + 1}.${item.facilitiesTypeName}`" />
						</view>
					</view>
				</view>
			</view>
			<view class="report-content-info-box ff-padding-10 ff-line-height-1-3">
				<view
					class="report-content-info-box-title ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					评估详情</view>
				<view class="report-content-info-box-content">
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left1">开始评估</view>
						<view class="ff-color-222 report-content-info-box-content-right">
							{{ assessProjectDetails.startTime }}
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left1">结束评估</view>
						<view class="ff-color-222 report-content-info-box-content-right">
							{{ assessProjectDetails.endTime }}
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left1">项目负责人</view>
						<view class="ff-color-222 report-content-info-box-content-right">
							<text v-for="(item, index) of assessProjectDetails.leaders"
								:key="index">{{ item.projectLeaderName }}&nbsp;{{ item.projectLeaderPhone }}</text>
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16"
						v-if="assessProjectDetails.assessStatus == 7 || assessProjectDetails.assessStatus == 9">
						<view class="report-content-info-box-content-left1">技术负责人</view>
						<view class="ff-color-222 report-content-info-box-content-right">
							<text v-for="(item, ind) of assessProjectDetails.signers"
								:key="ind">{{ item.projectSignerName }}&nbsp;{{ item.projectSignerPhone }}</text>
						</view>
					</view>
					<view class="ff-align-items-one ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left1">项目成员</view>
						<view class="ff-color-222 report-content-info-box-content-right">
							<view v-for="(item, ind) of assessProjectDetails.operators" :key="ind">
								{{ item.projectOperatorName }}&nbsp;{{ item.projectOperatorPhone }}
							</view>
						</view>
					</view>
					<view class="ff-padding-left-5 ff-margin-bottom-16">
						<view class="report-content-info-box-content-left1 ff-margin-bottom-15">评估依据</view>
						<view class="ff-flex-wrap">
							<view class="ff-margin-right-10 ff-margin-bottom-10"
								v-for="(item, index) of assessProjectDetails.basis" :key="index">
								<u-tag
									:text="`${index + 1}.${item.legalDocumentNumber == null ? '' : item.legalDocumentNumber}${ item.legalBasisName }`" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="report-content-info-box ff-padding-10 ff-padding-bottom-0">
				<view
					class="report-content-info-box-title ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					存在问题及整改措施</view>
				<view class="report-content-info-box-content">
					<view class="ff-padding-left-5 ff-line-height-1-5 ff-margin-bottom-16">
						<view class="ff-color-222">{{ reportInfo.question != '' ? reportInfo.question : '/' }}</view>
					</view>
				</view>
			</view>
			<view class="report-content-info-box ff-padding-10 ff-padding-bottom-0 ff-line-height-1-3 ff-color-222">
				<view
					class="report-content-info-box-title ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					评估结论</view>
				<view class="report-content-info-box-content">
					<view class="ff-padding-left-5 ff-margin-bottom-16">
						直接判定情况：
						<text class="ff-color-red" v-if="reportInfo.assessImmediateResult == 1">差</text>
						<text class="ff-color-orange" v-if="reportInfo.assessImmediateResult == 2">一般</text>
						<text class="ff-color-blue" v-if="reportInfo.assessImmediateResult == 3">好</text>
					</view>
					<view class="ff-padding-left-5 ff-line-height-1-5 ff-margin-bottom-16">
						<view class="ff-margin-bottom-10 ">综合评定情况：</view>
						<view class="ff-margin-bottom-10">
							<u-table>
								<u-tr>
									<u-th>评估单元</u-th>
									<u-th>权重(%)</u-th>
									<u-th>实际得分</u-th>
								</u-tr>
								<u-tr v-for="(item, index) of reportInfo.units" :key="index">
									<u-td>{{ item.unitName }}</u-td>
									<u-td>{{ item.weight }}</u-td>
									<u-td>{{ item.actualScore }}</u-td>
								</u-tr>
							</u-table>
						</view>
						<view class="ff-font-13 ff-margin-bottom-16 ff-color-999">
							判定标准
							<br />
							低于60分，结论为“差”；
							<br />
							60分（含）以上85分以下，结论为“一般”；
							<br />
							85分（含）以上，结论为“好”
						</view>
						<view class="ff-margin-bottom-16">
							最终判定情况：
							<text class="ff-color-red" v-if="reportInfo.assessFinalResult == 1">差</text>
							<text class="ff-color-orange" v-if="reportInfo.assessFinalResult == 2">一般</text>
							<text class="ff-color-blue" v-if="reportInfo.assessFinalResult == 3">好</text>
						</view>
					</view>
				</view>
			</view>
			<view class="report-content-info-box ff-padding-10 ff-padding-bottom-0 ff-color-222 ff-line-height-1-3">
				<view
					class="report-content-info-box-title ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					其他问题说明</view>
				<view class="report-content-info-box-content ff-margin-top-10"
					v-for="(item, index) of reportInfo.otherQuestions" :key="index">
					<view v-if="item.isOtherSuggestion == 2" class="ff-padding-left-5">
						<view class="ff-color-999 ff-margin-bottom-5">{{ item.questionExplain }}</view>
						<view>
							<view class="ff-margin-bottom-5 ff-color-999">存在问题：</view>
							<view class="ff-line-height-1-5 ff-margin-bottom-20">
								<view class="ff-color-222">{{ item.existProblem != '' ? item.existProblem : '/' }}
								</view>
							</view>
						</view>
						<view>
							<view class="ff-margin-bottom-5 ff-color-999">整改建议：</view>
							<view class="ff-line-height-1-5 ff-margin-bottom-15">
								<view class="ff-color-222">{{ item.recommendations != '' ? item.recommendations : '/' }}
								</view>
							</view>
						</view>
						<u-row gutter="16" justify="center">
							<u-col span="3" v-for="(items, ind) in item.questionExplainAttachs" :key="ind">
								<image class="questionImg ff-margin-bottom-10" @click="ViewImage(index, ind)"
									:src="items" mode=""></image>
							</u-col>
						</u-row>
					</view>
					<view v-if="item.isOtherSuggestion == 1" class="ff-padding-left-5">
						<view class="ff-color-999 ff-margin-bottom-10">{{ item.questionExplain }}</view>
						<view>
							<view class="ff-line-height-1-5 ff-margin-left-5 ff-margin-bottom-15">
								<view class="ff-color-222">
									{{ item.otherRecommendation != '' ? item.otherRecommendation : '/' }}
								</view>
							</view>
						</view>
						<u-row gutter="16" justify="center">
							<u-col span="3" v-for="(items, ind) of item.questionExplainAttachs" :key="ind">
								<image class="questionImg ff-margin-bottom-10" @click="ViewImage(index, ind)"
									:src="items" mode=""></image>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
			<view class="report-content-info-box ff-padding-10 ff-padding-bottom-20">
				<view
					class="report-content-info-box-title ff-margin-bottom-10 ff-font-16 ff-font-weight-600 ff-color-5C5F65 ff-border-radius-5">
					附件</view>
				<view>
					<view v-if="reportInfo.attachs">
						<u-row gutter="16" justify="center">
							<u-col span="3" v-for="(items, ind) of reportInfo.attachs" :key="ind">
								<image class="questionImg ff-margin-bottom-10" @click="ViewAttachsImage(ind)"
									:src="items" mode=""></image>
							</u-col>
						</u-row>
					</view>
					<view v-else class="ff-color-999 ff-padding-left-5">暂无</view>
				</view>
			</view>
		</view>
		<view class="report-but animate__animated animate__rubberBand"><u-button class="" type="primary"
				@click.stop="downloadReport">下载报告书</u-button></view>
		<!-- 组件区 -->
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	export default {
		name: 'Report',
		data() {
			return {
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				assessProjectDetails: {}, // 评估项目详情
				reportInfo: [] // 报告书内容数据
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			this.getassessProjectDetails(e.id); // 获取评估项目详情
			this.getReportInfo(e.id); // 获取报告书详情数据
		},
		methods: {
			// 获取报告书详情数据
			async getReportInfo(assessId) {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.get({
					url: `/bsAssessProjectInfo/getReport/${assessId}`
				});
				// console.log('获取报告书详情数据-----', data);
				if (data.code == 200) {
					this.reportInfo = data.data;
				}
				this.$refs.loading.closeLoading();
			},
			// 获取评估项目详情
			async getassessProjectDetails(assessId) {
				this.$refs.loading.openLoading('加载中···');
				let params = {
					assessId: assessId
				};
				const data = await this.$http.post({
					url: `/bsAssessProjectInfo/detail`,
					data: params
				});
				// console.log('获取评估项目详情-----', data);
				if (data.code == 200) {
					this.assessProjectDetails = data.data;
				}
				this.$refs.loading.closeLoading();
			},

			// 其他问题说明--预览照片
			ViewImage(index, ind) {
				uni.previewImage({
					urls: this.reportInfo.otherQuestions[index].questionExplainAttachs,
					current: this.reportInfo.otherQuestions[index].questionExplainAttachs[ind]
				});
			},
			// 附件--预览照片
			ViewAttachsImage(index) {
				uni.previewImage({
					urls: this.reportInfo.attachs,
					current: this.reportInfo.attachs[index]
				});
			},
			// 下载报告书
			downloadReport() {
				let that = this
				if (!that.assessProjectDetails.reportUrl) {
					that.$refs.uToast.show({
						title: '此报告书暂时无法下载',
						type: 'warning'
					});
					return;
				}
				that.$refs.loading.openLoading('报告书获取中···');
				uni.downloadFile({
					url: that.assessProjectDetails.reportUrl,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								that.$refs.loading.closeLoading();
								// console.log('打开文档成功');
							}
						});
					}
				});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.report {
		&-header {
			height: 320rpx;

			&-content {
				position: relative;

				&-success {
					padding: 50rpx 56rpx;
				}

				image {
					width: 340rpx;
					height: 80rpx;
					position: absolute;
					right: 2%;
					top: 18%;
				}
			}
		}

		&-content {
			.tips1 {
				border: 2rpx solid #2b68ff;
				color: #2b68ff;
				padding: 10rpx 15rpx;
				border-radius: 8rpx;
				margin-top: 15rpx;
			}

			.tips2 {
				border: 2rpx solid #f0403d;
				color: #f0403d;
				padding: 10rpx 15rpx;
				border-radius: 8rpx;
				margin-top: 15rpx;
			}

			margin-top: -190rpx;
			position: relative;

			&-info {
				&-header {
					image {
						width: 230rpx;
						height: 230rpx;
						position: absolute;
						right: 0%;
						top: 0%;
					}
				}

				&-box {
					&-title {
						background: linear-gradient(to right, #eeeeee, #ffffff);
						padding: 24rpx 20rpx 20rpx;
						margin: 24rpx 0 28rpx;
					}

					&-content {
						&-left {
							width: 41%;
							margin-right: 37rpx;
							color: #a6a6a6;
						}

						&-left1 {
							width: 41%;
							margin-right: 37rpx;
							color: #a6a6a6;
						}

						&-right {
							width: 64%;
						}

						&-textareaLeft {
							color: #a6a6a6;
						}

						&-fireList {
							border-bottom: 2rpx solid #eee;
						}

						&-img {
							width: 26%;
							height: 160rpx;
							margin: 3.65%;

							image {
								width: 100%;
								height: 100%;
							}
						}

						&-result {
							&-fraction {
								color: #adadad;
								margin: 34rpx 0 0;
							}

							&-text {
								margin-top: 38rpx;

								/deep/.u-input__textarea {
									font-size: 30rpx !important;
									color: #222222 !important;
									line-height: 1.3 !important;
									// padding: 0!important;
								}
							}
						}
					}
				}
			}
		}

		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;

			/deep/.u-size-default {
				height: 100rpx !important;
				line-height: 100rpx !important;
			}
		}
	}

	.questionImg {
		width: 180rpx;
		height: 180rpx;
	}

	.codeImg {
		width: 300rpx;
		height: 230rpx;
	}
</style>